<template>
  <view class="page-audio-detail page-wrap" :style="{paddingTop: barHeight + 'px'}">
    <view class="page-main-content">
      <view class="page-custom-top-nav">
        <image src="https://www.moguigame.com/static/common/back.png" class="back-img" mode="" @click="back">
        </image>
        <view class="vip-nav">
          <view class="vip-nav-item " :class="{'vip-nav-item-active': tabNav === 1}" @click="changeNav(1)">音频
          </view>
          <view class="vip-nav-item" :class="{'vip-nav-item-active': tabNav === 2}" @click="changeNav(2)">文稿
          </view>
        </view>
        <!-- #ifdef MP -->
        <button class="share-btn flex justify-center align-center" open-type="share">
          <image src="https://www.moguigame.com/static/audio/icon-share.png" class="icon-52 icon-share-mp"
            mode="aspectFill">
          </image>
        </button>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <image src="https://www.moguigame.com/static/audio/icon-share.png" class="icon-52 icon-share" mode="aspectFill">
        </image>
        <!-- #endif -->
      </view>
      <template v-if="tabNav === 2">
        <view class="page-text-wrap">
          <view class="audio-text-title">{{courseInfo.name}}</view>
          <view class="audio-detail-teacher">
            <image :src="courseInfo.teacher.thumb_image" class="teacher-ava" mode="aspectFill">
            </image>
            <view>讲师：{{courseInfo.teacher.name}}</view>
          </view>
          <view class="audio-text-content">
            {{courseInfo.content}}
          </view>
        </view>
      </template>
      <template v-if="tabNav === 1">

        <image :src="posterImg" class="audio-detail-cover" mode="aspectFill">
        </image>
        <view class="audio-detail-title line-2">{{courseInfo.name}}</view>
        <view class="audio-detail-teacher">
          <image :src="courseInfo.teacher.thumb_image" class="teacher-ava" mode="aspectFill"></image>
          <view>讲师：{{courseInfo.teacher.name}}</view>
        </view>
        <view class="audio-handle-wrap">

          <view class="audio-detail-handler-top audio-detail-handler-wrap flex align-center justify-between">
            <view class="audio-handle-item" @click="showTiming = true">
              <image src="https://www.moguigame.com/static/audio/icon-time.png" class="icon-48" mode="">
              </image>
              定时
            </view>

            <view class="flex align-center">
              <view class="audio-handle-item" @click="toGoods">
                <image src="https://www.moguigame.com/static/course/icon-recommend.png" class="icon-48"
                  mode="aspectFill"></image>
                <view>推荐产品</view>
              </view>
              <view class="audio-handle-item" @click="toShowWx">
                <image src="https://www.moguigame.com/static/audio/icon-audio-wx.png" class="icon-48" mode="aspectFill">
                </image>
                <view>联系助教</view>
              </view>
              <view class="audio-handle-item" @click="toCollect">
                <image v-if="courseInfo.collection_status" src="/static/common/like-fill.png" class="icon-48"
                  mode="aspectFill">
                </image>
                <image v-else src="https://www.moguigame.com/static/audio/like.png" class="icon-48" mode="aspectFill">
                </image>
                <view>收藏</view>
              </view>
              <view class="audio-handle-item" @click="showReward = true">
                <image src="https://www.moguigame.com/static/audio/reward.png" class="icon-48" mode="">
                </image>
                <view>打赏</view>
              </view>
            </view>
          </view>


          <view class="audio-progress-wrap">
            <DrapProgress min="0" :max="100" :mainValue="playPercent" ref="progress" @change="progressChange" />
            <!-- <view class="audio-progress"></view> -->
            <view class="audio-progrees-numbers flex align-center justify-between">
              <view class="audio-cur-time">{{formatTime(audioCurrentTime)}}</view>
              <view class="audio-end-time">{{formatTime(audioDuration)}}</view>
            </view>
          </view>


          <view class="audio-detail-handler-mid audio-detail-handler-wrap flex align-center justify-between">
            <view class="audio-handle-item" @click="changePlayType">
              <image :src="playType[typeIndex]['icon']" class="icon-48" mode="aspectFill">
              </image>
              {{playType[typeIndex]['name']}}
            </view>
            <view class="audio-play-wrap flex align-center justify-between">
              <image src="https://www.moguigame.com/static/audio/icon-pre.png" class="icon-48"
                @click="handleNext('prev')" mode="aspectFill">
              </image>
              <image src="https://www.moguigame.com/static/audio/btn-pause.png" @click="toPause" v-if="audioPlaying"
                class="icon-play-btn" mode="aspectFill"></image>
              <image src="https://www.moguigame.com/static/audio/btn-play.png" @click="toPlay" v-else
                class="icon-play-btn" mode="aspectFill"></image>
              <image src="https://www.moguigame.com/static/audio/icon-next.png" class="icon-48"
                @click="handleNext('next')" mode="aspectFill">
              </image>
            </view>
            <view class="audio-handle-item" @click="showAudioList = true">
              <image src="https://www.moguigame.com/static/audio/icon-list.png" class="icon-48" mode="aspectFill">
              </image>
              列表
            </view>
          </view>

          <view class="audio-detail-handler-bottom audio-detail-handler-wrap flex align-center justify-between">
            <view class="audio-handle-item" @click="showSpeed = true">
              <image src="https://www.moguigame.com/static/audio/icon-speed-1.png" class="icon-48" mode="">
              </image>
              {{curSpeed}}X
            </view>
            <view class="audio-handle-item" @click="toSeek('back')">
              <image src="https://www.moguigame.com/static/audio/icon-low.png" class="icon-48" mode="">
              </image>
              快退
            </view>
            <view class="audio-handle-item" @click="toSeek('front')">
              <image src="https://www.moguigame.com/static/audio/icon-fast.png" class="icon-48" mode="">
              </image>
              快进
            </view>
            <view class="audio-handle-item" @click="showComment = true">
              <image src="https://www.moguigame.com/static/audio/icon-comment.png" class="icon-48" mode="">
              </image>
              评论
            </view>
          </view>
        </view>
      </template>
    </view>
    <u-popup :show="showReward" mode="bottom" round="16" @close="close" @open="open">
      <view class="reward-pop-wrap">
        <view class="reward-pop-title">请选择打赏的金额</view>
        <view class="flex price-tag-wrap">
          <view class="price-tag" @click="selectPrice(item.price)"
            :class="{'price-tag-active': choicedAmount === item.price}" v-for="item in priceList" :key="item.price">
            {{item.price}}元
          </view>
        </view>
        <view class="reward-pop-title">其他金额</view>
        <input type="text" :value="curPrice" placeholder="请输入其他金额" class="reward-input" @change="handleAmount">
        <view class="cu-btn block round pay-reward-btn" @click="toReward">确认支付</view>
      </view>
    </u-popup>
    <u-popup :show="showSpeed" mode="bottom" closeable round="16" @close="close" @open="open">
      <view class="reward-pop-wrap">
        <view class="reward-pop-title speed-pop-title">倍数播放</view>
        <view class="speed-list">
          <view class="speed-item flex align-center justify-between" @click="changeSpeed(item)"
            v-for="item in speedList" :key="item.speed">
            <view>{{item.speed}}倍</view>
            <image src="https://www.moguigame.com/static/audio/speed-has.png" v-if="item.speed == curSpeed"
              class="icon-36" mode="aspectFill"></image>
            <!-- <view class="speed-no-wrap" @click="changeSpeed(item)" v-else></view> -->
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup :show="showTiming" mode="bottom" closeable round="16" @close="close" @open="open">
      <view class="reward-pop-wrap">
        <view class="reward-pop-title speed-pop-title">定时关闭</view>
        <view class="speed-list">
          <view class="speed-item flex align-center justify-between" @click="changeTime(0)">
            <view>不开启</view>
            <image src="https://www.moguigame.com/static/audio/speed-has.png" v-if="curTime === 0" class="icon-36"
              mode=""></image>
            <!-- <view class="speed-no-wrap" @click="changeTime({})" v-else></view> -->
          </view>
          <view class="speed-item flex align-center justify-between" @click="changeTime(item)" v-for="item in timeList"
            :key="item.time">
            <view>{{item.time}}分钟</view>
            <image src="https://www.moguigame.com/static/audio/speed-has.png" v-if="item.time == curTime"
              class="icon-36" mode=""></image>
            <!-- <view class="speed-no-wrap" @click="changeTime(item)" v-else></view> -->
          </view>
          <view class="speed-item flex align-center justify-between" @click="showCustomTiming = true">
            <view>自定义 <span class="text-gray text-sm margin-left-8">{{customTimeStr}}</span>
            </view>
            <image src="https://www.moguigame.com/static/audio/speed-has.png" v-if="isCustom" class="icon-36" mode="">
            </image>
            <!-- <view class="speed-no-wrap" @click="showCustomTiming = true" v-else></view> -->
          </view>
        </view>
      </view>
      <u-overlay :show="showCustomTiming" zIndex="10076" @click="showCustomTiming = false"></u-overlay>
    </u-popup>
    <u-picker :show="showCustomTiming" ref="uPicker" confirmColor="#7644FF" @cancel="showCustomTiming = false"
      :columns="columns" @confirm="confirm" @change="changeHandler">
    </u-picker>
    <u-popup :show="showAudioList" mode="bottom" closeable round="16" @close="close" @open="open">
      <view class="reward-pop-wrap audio-list-pop-wrap bg-gray">
        <view class="audio-list-icons">
          <view class="audio-icon-wrap">
            <image src="https://www.moguigame.com/static/audio/icon-audio-refresh.png" class="icon-36" mode="">
            </image>
          </view>
          <view class="audio-icon-wrap">
            <image src="https://www.moguigame.com/static/audio/icon-audio-sort.png" class="icon-36" mode="">
            </image>
          </view>
        </view>
        <scroll-view scroll-y class="audio-list-wrap">
          <view class="audio-list-item bg-white flex justify-between align-center" v-for="(item, index) in courseList"
            :key="item.id" @click="selectCourse(index)">
            <view class="flex">
              <image :src="item.poster_image" class="audio-list-cover" mode="aspectFill">
                <view class="flex-sub margin-right">
                  <view class="audio-item-title line-2">{{item.name}}</view>
                  <view class="margin-top-8 audio-item-refresh">
                    {{item.type_text}}
                  </view>
                </view>
            </view>
            <image src="https://www.moguigame.com/static/course/icon-course-playing.png" v-if="index == playIndex"
              class="icon-48" mode=""></image>
            <image src="https://www.moguigame.com/static/course/icon-course-play.png" v-else class="icon-48" mode="">
            </image>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-popup :show="showQrcode" mode="center" closeable round="16" @close="close" @open="open">
      <view class="concat-wx-wrap">
        <view class="concat-wx-title">联系助教</view>
        <view class="qr-code-wrap">
          <image :src="qrcode" class="qr-code-img" mode="aspectFill"></image>
        </view>
      </view>
    </u-popup>
    <u-popup :show="showComment" mode="bottom" closeable round="16" @close="close" @open="open">
      <view class="reward-pop-wrap">
        <view class="reward-pop-title speed-pop-title">评论</view>
        <scroll-view scroll-y class="comment-list-wrap" @scrolltolower="commentReachBottom">
          <view class="comment-list-item bg-white flex justify-between align-center" v-for="item in commentList"
            :key="item.id">
            <view class="flex flex-1">
              <image :src="item.user.avatar" class="comment-item-cover" mode="aspectFill">
                <view class="flex-sub margin-right">
                  <view class="comment-item-name">{{item.user.nickname}}</view>
                  <view class="margin-top-8 comment-item-con  line-2">
                    {{item.content}}
                  </view>
                  <view class="flex align-center justify-between comment-item-time">
                    <view>{{item.createtime_text}}</view>
                    <view class="flex align-center justify-center">
                      <view class="flex align-center" @click="handleCommentZan(item.id)">
                        <image src="https://www.moguigame.com/static/course/icon-yishoucang.png" v-if="item.is_like"
                          class="icon-32 margin-right-8" mode="" />
                        <image v-else src="https://www.moguigame.com/static/course/icon-shoucang.png"
                          class="icon-32 margin-right-8" mode="aspectFill" />
                      </view>
                      <view style="line-height: 32rpx;">{{item.like_num}}</view>
                    </view>
                  </view>
                  <view class="block reply-content" v-if="item.reply && item.reply.length> 0">
                    <view class="coruse-eve-likes flex align-center" v-if="false">
                      <image src="https://www.moguigame.com/static/course/icon-shoucang.png"
                        class="icon-32 margin-right-8" mode=""></image>
                      <view>钱宇辰觉得很赞</view>
                    </view>

                    <view class="coruse-eve-recommend flex" v-for="cmt in item.reply" :key="cmt.id">
                      <view class="eve-recommend-user">{{cmt.user.nickname}}：</view>
                      <view class="flex-sub">{{cmt.reply_content}}</view>
                    </view>
                  </view>
                </view>
            </view>
          </view>
        </scroll-view>
        <view class="flex align-center justify-between comment-handler-wrap">
          <input type="text" v-model="commentText" placeholder="请输入" class="comment-input" />
          <view class="cu-btn round btn-comment-send" @click="addComment">发送</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import store from '@/store';
  import {
    mapState
  } from 'vuex'
  import {
    IMG_BASE_URL
  } from '../../config/env';
  import {
    pay
  } from '../../utils/pay';
  import DrapProgress from '@/components/DrapProgress.vue'
  import { playAudio } from '../../utils/audio';
  const SEEK_STEP = 15
  export default {
    data() {
      return {
        audioInstance: null,
        tabNav: 1,
        showReward: false,
        showSpeed: false,
        showTiming: false,
        showAudioList: false,
        showComment: false,
        showCustomTiming: false,
        custTime: [],
        curPrice: '',
        finalAmount: 0,
        choicedAmount: '',
        priceList: [{
          price: '3'
        }, {
          price: '6'
        }, {
          price: '25'
        }, {
          price: '50'
        }, {
          price: '98'
        }, {
          price: '198'
        }],
        speedList: [{
            speed: '0.5'
          }, {
            speed: '0.8'
          },
          {
            speed: '1.0'
          }, {
            speed: '1.25'
          },
          {
            speed: '1.5'
          }, {
            speed: '2.0'
          }
        ],
        timeList: [{
          time: '10'
        }, {
          time: '20'
        }, {
          time: '30'
        }, {
          time: '60'
        }, {
          time: '90'
        }],
        columns: [
          Array.from({
            length: 24
          }, (v, k) => k).map(el => el + '小时'),
          Array.from({
            length: 60
          }, (v, k) => k).map(el => el + '分钟')
        ],
        showQrcode: false,
        playType: [{
            name: '循环',
            type: 'round',
            icon: 'https://www.moguigame.com/static/audio/icon-xunhuan.png'
          },
          {
            name: '随机',
            type: 'random',
            icon: 'https://www.moguigame.com/static/audio/loop-random-white.png'
          },
          {
            name: '单曲',
            type: 'single',
            icon: 'https://www.moguigame.com/static/audio/loop-one-white.png'
          }
        ],
        barHeight: 44,

        courseId: '',
        courseInfo: {
          teacher: {
            name: ''
          }
        },
        courseList: [],
        commentList: [],
        cmt_page: 1,
        cmt_page_size: 10,
        cmt_page_max: false,
        commentText: '',
        qrcode: '',
      };
    },
    components: {
      DrapProgress
    },
    async onLoad(options) {
      this.barHeight = uni.getStorageSync('barHeight')
      this.courseId = options.course_id
      await this.getCourse()
      this.getComments()
      this.audioInstance = uni.getBackgroundAudioManager()
      try {
        const qrcode = uni.getStorageSync('qrcode')
        if (qrcode) {
          this.qrcode = qrcode
        }
      } catch (e) {
        //TODO handle the exception
        console.error(e)
      }
    },
    onUnload() {
      this.postStudy(this.playIndex)
      store.commit('SET_LAST_PLAY_COURSE_ID', this.courseId)
    },
    onShareAppMessage() {
      this.audioInstance.pause()
      this.audioPlaying = false
      return {
        title: this.courseInfo.name,
        path: '/pages/audioDetail/audioDetail?course_id=' + this.courseId,
        imageUrl: this.posterImg
      }
    },
    computed: {
      ...mapState(['audioList', 'playIndex', 'audioDuration', 'audioCurrentTime', 'playPercent', 'curSpeed',
      'curTime', 'isCustom', 'customTimeStr', 'typeIndex', 'audioCanplay', 'audioPlaying', 'study_time', 'currentCourseId']),
      posterImg() {
        const poster = this.courseInfo.poster_image
        if (/^http/.test(poster)) {
          return poster;
        }
        return IMG_BASE_URL + poster
      }
    },
    methods: {
      async getCourse() {
        try {
          const res = await this.$Api.getCourceDetail({
            course_id: this.courseId
          })
          const {
            course_file,
            course_comment
          } = res.data
          this.courseList = course_file
          // this.commentList = course_comment
          this.courseInfo = res.data
          if (course_file?.length > 0) {
           store.dispatch('setCourseList', course_file)
           if(this.currentCourseId != this.courseId) {
              this.$store.commit('SET_AUDIO_CURRENTTIME', 0)
              this.$store.commit('SET_AUDIO_DURATION', 0)
              this.$store.commit('SET_AUDIO_READY', false)
              this.$store.commit('SET_PLAY_STATE', false)
              this.$store.commit('SET_CURRENT_COURSE_ID', this.courseId)
              this.$store.commit('SET_PLAY_INDEX', 0)
              this.$store.commit('SET_AUDIO_SPEED', 1)
              this.$store.commit('SET_AUDIO_TYPE_INDEX', 0)
              this.$store.commit('SET_AUDIO_CUSTOM_TIME', '00:00')
              this.$store.commit('SET_AUDIO_CUSTOM', false)
              this.$store.commit('SET_STUDY_TIME', 0)
              this.$store.commit('SET_AUDIO_PERCENT', 0)
              playAudio()
           }
          } else {
            uni.showToast({
              title: '暂无音频',
              icon: 'none'
            })
          }

          // this.audioInstance.play()
          // this.audioPlaying = true
        } catch (e) {
          //TODO handle the exception
        }
      },
      async getComments() {
        try {
          const {
            data
          } = await this.$Api.getCourseComments({
            course_id: this.courseId,
            page: this.cmt_page,
            page_size: this.cmt_page_size
          })
          if (Array.isArray(data?.data)) {
            if (data.data.length < this.cmt_page_size) {
              this.cmt_page_max = true
            }
            this.commentList = [...this.commentList, ...data.data]
            this.cmt_page += 1
          }

        } catch (e) {
          //TODO handle the exception
        }
      },
      commentReachBottom() {
        if (this.cmt_page_max) return
        this.getComments()
      },
      async postStudy(idx) {
        const course = this.courseList[idx]
        if (!course) {
          return
        }
        await this.$Api.postStudyTime({
          course_id: course.course_id,
          course_file_id: course.id,
          type: 1,
          view_time: this.study_time / 1000
        }).catch(err => {
          console.error(err)
        })
      },
      addComment() {
        if (this.commentText == '') return
        this.$Api.addCourseComment({
          course_id: this.courseId,
          content: this.commentText
        }).then(res => {
          this.getCourse()
          this.commentText = ''
          uni.showToast({
            title: '评论成功',
            icon: 'none'
          })
        })
      },
      handleCommentZan(id) {
        this.$Api.courseCommentFav({
          comment_id: id
        }).then(res => {
          const idx = this.commentList.findIndex(item => item.id === id)
          const like_num = this.commentList[idx]['like_num'] + (this.commentList[idx]['is_like'] ? -1 : 1)
          this.$set(this.commentList, idx, {
            ...this.commentList[idx],
            is_like: !this.commentList[idx]['is_like'],
            like_num: like_num
          })
        })
      },
      handleNext(type) {
        if (!this.audioCanplay) {
          return uni.showToast({
            title: '音频未加载完成',
            icon: 'none'
          })
        }
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        this.$store.dispatch('setPlayState', false)
        this.$store.dispatch('setAudioPercent', 0)
        this.$store.dispatch('setAudioReady', false)
        switch (type) {
          case 'prev':
            this.selectCourse(this.playIndex === 0 ? this.audioList.length - 1 : this.playIndex - 1)
            break;
          case 'next':
            this.selectCourse(this.playIndex === this.audioList.length - 1 ? 0 : this.playIndex + 1)
            break;
        }
      },
      changePlayType() {
        const typeIndex = this.typeIndex === this.playType.length - 1 ? 0 : this.typeIndex + 1
        this.$store.dispatch('setAudioTypeIndex', typeIndex)
        this.$store.dispatch('setPlayTypeStr', this.playType[typeIndex]['type'])
      },
      selectCourse(index) {
        console.log(index);
        if (index == this.playIndex) return
        this.audioInstance.stop()
        this.$store.dispatch('setPlayIndex', index)
        this.$store.dispatch('setAudioCurrentTime', 0)
        playAudio()
        this.$store.dispatch('setPlayState', true)
        // this.audioInstance.src = this.audioList[index].file
        // this.audioInstance.title = this.audioList[index].name
        // this.audioInstance.coverImgUrl = this.audioList[index].poster_image
        // this.audioInstance.seek(0)
        // this.audioInstance.play()
        uni.hideLoading()
      },
      seekFront() {
        const current = this.audioCurrentTime
        if (current + SEEK_STEP > this.audioInstance.duration) {
          this.audioInstance.seek(this.audioInstance.duration)
          this.$store.dispatch('setAudioCurrentTime', this.audioInstance.duration)
          this.audioInstance.stop()
          return
        }
        this.audioInstance.seek(current + SEEK_STEP)
        this.$store.dispatch('setAudioCurrentTime', this.audioInstance.currentTime + SEEK_STEP)
      },
      seekBack() {
        const current = this.audioCurrentTime
        if (current - SEEK_STEP < 0) {
          this.audioInstance.seek(0)
          this.$store.dispatch('setAudioCurrentTime', 0)
          return
        }
        this.audioInstance.seek(current - SEEK_STEP)
        this.$store.dispatch('setAudioCurrentTime', this.audioInstance.currentTime - SEEK_STEP)
      },
      toSeek(type) {
        switch (type) {
          case 'front':
            this.seekFront()
            break;
          case 'back':
            this.seekBack()
            break;
        }
      },
      playAudio(item, index) {
        this.$store.dispatch('setPlayIndex', index)
        this.audioInstance.src = item.file
        this.audioInstance.title = item.name
        this.audioInstance.coverImgUrl = item.poster_image
        this.audioInstance.play()
      },
      pauseAudio() {
        this.audioInstance.pause()
      },
      formatTime(time) {
        const min = Math.floor(time / 60)
        const sec = Math.floor(time % 60)
        const hour = Math.floor(min / 60)
        const minStr = min % 60 < 10 ? '0' + min % 60 : min % 60
        const secStr = sec < 10 ? '0' + sec : sec
        const hourStr = hour < 10 ? '0' + hour : hour
        return hour > 0 ? `${hourStr}:${minStr}:${secStr}` : `${minStr}:${secStr}`
      },
      toCollect() {
        this.$Api.postToggleCollect({
          course_id: this.courseId
        }).then(res => {
          const msg = res.data.collection_status ? '收藏成功' : '取消收藏'
          uni.showToast({
            icon: 'none',
            title: msg
          })
          this.courseInfo.collection_status = res.data.collection_status
        })
      },
      toShowWx() {
        this.showQrcode = true
      },
      toGoods() {
        uni.navigateTo({
          url: '/pages/goodsDetail/goodsDetail?goodsId=' + this.courseInfo.goods_id
        })
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker
        } = e
        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        // if (columnIndex === 0) {
        //     // picker为选择器this实例，变化第二列对应的选项
        //     picker.setColumnValues(1, this.columnData[index])
        // }
      },
      // 回调参数为包含columnIndex、value、values
      confirm(e) {
        console.log('confirm', e)
        const [hour, minut] = e.value
        const [ihour, iminut] = e.indexs
        const curTime = ihour * 60 + iminut
        this.$store.dispatch('setAudioTime', curTime)
        const customTimeStr = hour + minut
        this.$store.dispatch('setAudioCustomTime', customTimeStr)
        this.$store.dispatch('setAudioCustom', true)
        this.showCustomTiming = false
        if (this.curTime == 0) {
          if (this.timeout) {
            clearTimeout(this.timeout)
            this.timeout = null
          }
        } else {
          if (this.timeout) {
            clearTimeout(this.timeout)
          } 
          this.startTiming()
        }
      },
      changeSpeed(item) {
        this.$store.dispatch('setAudioSpeed', item.speed)
        this.audioInstance.playbackRate = Number(item.speed)
        this.showSpeed = false;
      },
      changeTime(item) {
        this.$store.dispatch('setAudioTime', item.time)
        this.$store.dispatch('setAudioCustom', false)
        this.$store.dispatch('setAudioCustomTime', '')
        this.showTiming = false;
        if (item == 0) {
          if (this.timeout) {
            clearTimeout(this.timeout)
            this.timeout = null
          }
        } else {
          if (this.timeout) {
            clearTimeout(this.timeout)
            this.startTiming()
          } else {
            this.startTiming()
          }
        }
      },
      startTiming() {
        this.timeout = setTimeout(() => {
          const bgAudio = uni.getBackgroundAudioManager()
          bgAudio.stop()
        }, this.curTime * 60 * 1000)
      },

      selectPrice(amount) {
        this.choicedAmount = amount
        this.finalAmount = amount
        this.curPrice = ''
      },

      handleAmount(e) {
        this.finalAmount = e.detail.value
        this.choicedAmount = ''
      },
      async toReward() {
        await pay('reward', 'createRewardOrder', this.finalAmount, 'amount', '打赏')
        this.showReward = false
      },
      toPlay() {
        if (this.audioCanplay) {
          this.$store.dispatch('setPlayState', true)
          this.audioInstance.play()
          return
        }
        uni.showToast({
          title: '音频无法播放！',
          icon: 'error'
        })
      },
      toPause() {
        this.$store.dispatch('setPlayState', false)
        this.audioInstance.pause()
      },
      toComment() {
        this.showComment = true
      },
      back() {
        uni.navigateBack({
          fail() {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        })
      },
      changeNav(i) {
        this.tabNav = i
      },
      progressChange(e) {
        if (!this.audioCanplay) {
          return uni.showToast({
            title: '请等待音频加载完成！',
            icon: 'error'
          })
        }
        // TODO: 换算成时间
        console.log('progressChange', e)
        this.$store.dispatch('setAudioPercent', e)
        const time = this.audioDuration * e / 100
        this.audioInstance.seek(time)
        this.$store.dispatch('setAudioCurrentTime', time)
      },
      open() {
        // console.log('open');
      },
      close() {
        this.showReward = false
        this.showSpeed = false
        this.showTiming = false
        this.showAudioList = false
        this.showComment = false
        this.showQrcode = false
        // console.log('close');
      }
    }
  }
</script>

<style lang="scss">
  .reward-pop-wrap {
    padding: 32rpx;
    position: relative;

    &.audio-list-pop-wrap {
      padding: 32rpx 16rpx;
      border-radius: 32rpx;
      overflow: hidden;
    }

    .comment-input {
      width: 526rpx;
      height: 76rpx;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      padding: 0 32rpx;
    }

    .comment-handler-wrap {
      padding: 16rpx 0;
    }

    .btn-comment-send {
      width: 136rpx;
      height: 76rpx;
      background: #7644FF;
      border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #FFFFFF;
    }

    .comment-list-wrap {
      max-height: 836rpx;
      margin-top: 16rpx;

      .comment-item-cover {
        height: 64rpx;
        width: 64rpx;
        border-radius: 50%;
        min-width: 64rpx;
        margin-right: 24rpx;
      }

      .comment-list-item {
        padding: 32rpx 0;

        .flex-1 {
          flex: 1
        }
      }

      .comment-item-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
      }

      .comment-item-con {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        margin-top: 8rpx;
      }

      .comment-item-time {
        margin-top: 4rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }

      .coruse-eve-likes {
        width: 590rpx;
        background: #F6F6F6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 16rpx;
        margin-top: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;

      }

      .reply-content {
        width: 590rpx;
        background: #F6F6F6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 16rpx;
        margin-top: 24rpx;
      }

      .coruse-eve-recommend {
        width: 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        margin-bottom: 24rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .eve-recommend-user {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .audio-list-wrap {
      max-height: 836rpx;
      margin-top: 16rpx;

      .audio-list-cover {
        height: 128rpx;
        width: 112rpx;
        min-width: 112rpx;
        border-radius: 8rpx;
        overflow: hidden;
        margin-right: 16rpx;
      }

      .audio-list-item {
        width: 718rpx;
        height: 176rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-bottom: 16rpx;
        padding: 24rpx 32rpx;
      }

      .audio-item-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #000000;
      }

      .icon-48 {
        min-width: 48rpx;
      }

      .audio-item-refresh {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
    }

    .custom-time-confirm-btn {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #7644FF;
      position: absolute;
      right: 32rpx;
      top: 24rpx;
    }

    .audio-list-icons {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 160rpx;

      .audio-icon-wrap {
        height: 64rpx;
        width: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #fff;
      }
    }

    .reward-pop-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      margin-top: 16rpx;
    }

    .speed-pop-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #000000;
      text-align: center;
      margin-top: 0;
    }

    .speed-item {
      height: 116rpx;
      border-bottom: 1rpx solid #eee;
    }

    .speed-no-wrap {
      height: 36rpx;
      width: 36rpx;
      min-width: 36rpx;
      border-radius: 4rpx;
      border: 1rpx dotted #666;
    }

    .pay-reward-btn {
      width: 702rpx;
      height: 88rpx;
      background: #7644FF;
      border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
      line-height: 88rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-top: 56rpx;
    }

    .reward-input {
      margin-top: 16rpx;
      width: 686rpx;
      height: 84rpx;
      background: #F8F8F8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 0 24rpx;
    }

    .price-tag-wrap {
      flex-wrap: wrap;
      margin-top: 16rpx;

      .price-tag {
        width: 207rpx;
        height: 80rpx;
        background: #F8F8F8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        text-align: center;
        line-height: 80rpx;
        margin-bottom: 32rpx;
        margin-right: 32rpx;

        &:nth-child(3n) {
          margin-right: 0;
        }

        &.price-tag-active {
          background: rgba(118, 68, 255, 0.06);
          border: 1rpx solid #7644FF;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #7644FF;
        }
      }
    }
  }

  .page-audio-detail {
    min-height: 100vh;
    color: #333;
    background-color: #555d76;
    padding-bottom: calc(500rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(500rpx + env(safe-area-inset-bottom));
    // background:url(https://www.moguigame.com/static/temp/shop-1.png) no-repeat center center fixed;
    // background-repeat: no-repeat;
    position: relative;

    // &:before{
    //   content: "";/* 必须包括 */
    //   position: absolute;/* 固定模糊层位置 */
    //   width:300%;
    //   height:300%;
    //   left: -100%;/* 回调模糊层位置 */
    //   top: -100%;/* 回调模糊层位置 */
    //   background:url(https://www.moguigame.com/static/temp/shop-1.png) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
    //   filter: blur(20px);/* 值越大越模糊 */
    //   z-index: -2;/* 模糊层在最下面 */
    // }
    // .page-main-content {
    //   z-index: 0;/* 为不影响内容显示必须为最高层 */
    //   position: relative;
    //   overflow: hidden;
    // }

    .page-text-wrap {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
      padding: 48rpx;

      .audio-text-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
      }

      .audio-text-content {
        margin-top: 16rpx;
      }
    }

    .audio-progress-wrap {
      padding: 0 48rpx;
      margin-top: 44rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #FEFEFE;

      .audio-progress {
        width: 100%;
        height: 4rpx;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }

    .audio-handle-wrap {
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      background-color: #555d76;
      z-index: 9;
      padding-top: 16rpx;
      padding-bottom: calc(16rpx + constant(safe-area-inset-bottom)) !important;
      padding-bottom: calc(16rpx + env(safe-area-inset-bottom)) !important;
    }

    .audio-detail-handler-wrap {

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #FFFFFF;
      padding: 0 48rpx;

      &.audio-detail-handler-top {
        // margin-top: 118rpx;
      }

      &.audio-detail-handler-mid {
        margin-top: 40rpx;
        height: 120rpx;

        .audio-play-wrap {
          width: 382rpx;
          margin-right: 48rpx;
        }

        .icon-play-btn {
          height: 120rpx;
          width: 120rpx;
        }
      }

      &.audio-detail-handler-bottom {
        margin-top: 40rpx;

        .audio-handle-item {
          flex-direction: row;
        }

        .icon-48 {
          margin-bottom: 0;
          margin-right: 8rpx;
        }
      }

      .icon-48 {
        margin-bottom: 4rpx;
      }

      .audio-handle-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: 48rpx;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .audio-detail-teacher {
      width: 208rpx;
      height: 48rpx;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
      margin: 8rpx auto 0;
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #FFFFFF;
      padding: 0 4rpx;

      .teacher-ava {
        height: 40rpx;
        width: 40rpx;
        border-radius: 20rpx;
        margin-right: 8rpx;
      }
    }

    .audio-detail-cover {
      width: 500rpx;
      height: 660rpx;
      box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 24rpx auto 0;
      display: block;
    }

    .audio-detail-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      width: 622rpx;
      text-align: center;
      margin: 24rpx auto 0;
    }

    .share-btn {
      position: absolute;
      top: 94rpx;
      right: 32rpx;
      z-index: 9;
      width: 60rpx;
      height: 60rpx;

      &::after {
        padding: 0;
        border: none;
        border-radius: 0;
      }

      .icon-share-mp {
        width: 52rpx;
        height: 52rpx;
      }
    }

    .icon-share {
      position: absolute;
      width: 52rpx;
      height: 52rpx;
      right: 32rpx;
    }

    .vip-nav {
      width: 224rpx;
      height: 58rpx;
      background: #fff;
      border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
      margin: 0 auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-item {
        height: 58rpx;
        border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
        text-align: center;
        line-height: 58rpx;
        padding: 0 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #7644FF;
      }

      .vip-nav-item-active {
        background: #7644FF;
        color: #fff;
      }
    }
  }
</style>